Asset Modules

Day15 的練習中，透過 loader 讓 Webpack 可以讀懂 css 語言，網頁中的元素除了 css 樣式外還會有圖片、字型等等需要使用 loader 來處理，Webapck 5 版本整合了這些靜態資源的 loader 成為一包 Asset Modules，可以直接使用。

配置方法：

module.exports = {
 module: {
   rules: [
     {
       test: /\.png/,
       type: 'asset/resource'
     }
   ]
 },
};

即時顯示結果－webpack-dev-server

每次編輯完文件都需要執行build來檢查成果不是很方便，webpack-dev-server 可以建置本地伺服器，只要編輯完儲存檔案就能即時看到新的結果。

1. 安裝dev-server套件。

   $ npm i -D webpack-dev-server
   

2. 修改 webpack.config.js。

   module.exports = {
     devServer: {
      static: { 
      // 'dist'這個資料夾名稱需要和輸出點一致，不然會找不到開啟的網頁
        directory: path.join(__dirname, 'dist'),
      },
      compress: true,
      // 使用本地的 XXXXport 來架設伺服器，可以自定為其他 port，要避免與其他程式衝突。
      port: 9000,
      // 伺服器運行後自動用瀏覽器開啟網頁，可以改 false 取消
      open: true,
      },
   }
   

3. 修改 package.json

   "scripts": {
     // 新增指令
     "dev": "webpack serve"
   },
   

4. 完成後執行npm run dev來測試成果。

5. 備註：

   • 開啟 devServer 後，終端機會保持在 server 運行的狀態，沒辦法再執行其他指令，這時可以按Ctrl + C關閉伺服器，就會解除終端機鎖定。
   • 指令名稱也可以用特殊字 "start"，執行時只要輸入npm start，不需要加上 run。